<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="未签退记录" name="list" >

<!--      <el-button type="primary" style="margin-bottom: 16px;" @click="exportVisible = true">-->
<!--        导出数据-->
<!--      </el-button>-->
      <div style="max-height: calc(100vh - 250px); overflow-y: auto;">
      <el-table :data="reservations" style="width: 100%" border >
        <el-table-column label="序号" prop="id" width="70px"/>
        <el-table-column label="预约类型" prop="type" width="100px"/>
        <el-table-column label="姓名" prop="realName" width="100px"/>
        <el-table-column label="房间类型" prop="roomSubTypeName"/>
<!--        <el-table-column label="楼层" prop="floorName" />-->
        <el-table-column label="房间号" prop="roomNumber" width="80px"/>
        <el-table-column label="隔间号" prop="cubicleNumber" width="80px"/>
        <el-table-column label="预约日期" prop="reservationDate" />
        <el-table-column label="预约时间" prop="startTime">
          <template #default="{ row }">
            {{row["startTime"]}} - {{row["endTime"]}}
          </template>
        </el-table-column>
        <el-table-column label="签到时间" prop="clockInTime">
          <template #default="{ row }">
            <p v-if="row['clockInTime']">{{row["clockInTime"]}}</p>
            <p v-if="!row['clockInTime']">未签到</p>
          </template>
        </el-table-column>
<!--        <el-table-column label="签退时间" prop="clockOutTime"/>-->
<!--        <el-table-column label="状态" prop="statusName" />-->
        <el-table-column label="操作" width="120">
          <template #header>
            <el-input
                v-model="search"
                @input="handleSearch"
                size="small"
                placeholder="通过姓名搜索"
            />
          </template>
          <template #default="scope">

          </template>
        </el-table-column>
      </el-table>
      </div>

      <el-pagination
          v-model:current-page="page"
          :page-size="pageSize"
          :total="total"
          @current-change="handlePageChange"
          layout="total, prev, pager, next"
          background
          style="margin-top: 16px"
      />
    </el-tab-pane>

  </el-tabs>

</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getNotOutReservations } from '../utils/reservationApi.js'

import {debounce} from "lodash";

const activeName = ref("list")
const search = ref("")
const reservations = ref([])
const page = ref(1)
const pageSize = 10
const total = ref(0)

// 响应 data.{records total}
const loadReservations = async () => {
  const res = await getNotOutReservations(page.value, pageSize, search.value)
  reservations.value = res.data["records"] || res.data
  total.value = res.data.total || reservations.value.length
}


const handlePageChange = (newPage) => {
  page.value = newPage
  loadReservations()
}

// 防抖搜索函数
const handleSearch = debounce(() => {
  page.value = 1
  loadReservations()
}, 300)

// 初始加载
loadReservations()
</script>
